<template>
  <div>
    <el-row>
      <el-col :span="18">
        <div id="stackchart" style="width:100%;height:900px;margin-top:20px"></div>
      </el-col>
      <el-col :span="6">
        <div class="tjInfo">
          <h2 style="padding:0px">数据统计</h2>
          <div style="padding:5px">
            <table class="userInfoEditTable" style="border-collapse:collapse;background-color:white;" width="100%" cellspacing="0">
              <tr>
                <td colspan="3">
                  矛盾纠纷事件
                </td>
              </tr>
              <tr>
                <td>地区</td>
                <td>已办事项</td>
                <td>待办事项</td>
              </tr>
              <tr v-for="(v,index) in area" :key="v" :class="index%2==0?'mycolor':''">
                <td>{{v}}</td>
                <td>{{hadDone[index]}}</td>
                <td>{{needDoList[index]}}</td>
              </tr>
              <tr class="mycolor">
                <td>合计</td>
                <td>{{getHadDoneCount(hadDone)}}</td>
                <td>{{getNeedDoList(needDoList)}}</td>
              </tr>
            </table>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as api from "@/api/contradictionManage/index";

export default {
  data() {
    return {
      stackChart: null,
      area: [
        "上杆",
        "马梗",
        "李塔",
        "潘冲",
        "夏林",
        "后河",
        "天乐",
        "玉晨",
        "开发区",
        "墓东"
      ],
      hadDone: [10, 22, 100, 34, 90, 130, 20, 40, 90, 50],
      needDoList: [40, 52, 150, 134, 120, 160, 120, 90, 190, 100]
    };
  },
  methods: {
    initCharts(a, b, c) {
      this.stackChart = echarts.init(document.getElementById("stackchart"));
      this.stackChart.setOption({
        color: ["#6495ED", "#B452CD"],
        title: {
          text: "开发区各村矛盾纠纷事件处理统计柱状图"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: a,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "已办",
            type: "bar",
            barWidth: "30%",
            data: b
          },
          {
            name: "待办",
            type: "bar",
            barWidth: "30%",
            data: c
          }
        ]
      });
    },
    getHadDoneCount(data) {
      let sum = 0;
      for (let i = 0; i < data.length; i++) {
        sum += data[i];
      }

      return sum;
    },
    getNeedDoList(data) {
      let sum = 0;
      for (let i = 0; i < data.length; i++) {
        sum += data[i];
      }

      return sum;
    }
  },
  mounted() {
    api.getDisputeEventCount().then(res => {
      this.area = res.data[0];
      this.hadDone = res.data[1];
      this.needDoList = res.data[2];
      this.initCharts(this.area, this.hadDone, this.needDoList);
    });
  }
};
</script>

<style scoped>
.tjInfo {
  /* margin-top: 50px; */
  background-color: aliceblue;
  width: 100%;
  height: 800px;
  padding: 10px;
  /* text-indent: 2em; */
}
.userInfoEditTable,
.userInfoEditTable td {
  /* font-size: 8px; */
  border: 1px solid darkgrey;
  padding: 10px;
  text-align: center;
}
</style>

